<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JSON 表格展示与编辑</title>
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        input {
            width: 100%;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <!-- 用于显示表格的容器 -->
    <div id="jsonTableContainer"></div>

    <script>
        $(document).ready(function() {
            // 假设静态文件路径为 static/data.json，需根据实际情况修改
            $.getJSON('{{ url_for("static", filename="json/data.json") }}', function(data) {
                console.log('原始数据:', data);
                // 检查 data 是否包含 data 数组
                if (data && Array.isArray(data.data) && data.data.length > 0) {
                    data = data.data;
                } else {
                    console.log('未找到有效的数据数组:', data);
                    return;
                }

                // 创建表格元素
                var table = $('<table></table>');
                // 创建表头
                var thead = $('<thead></thead>');
                var headerRow = $('<tr></tr>');

                // 获取 JSON 数据的第一个对象的键作为表头
                $.each(data[0], function(key, value) {
                    headerRow.append($('<th>' + key + '</th>'));
                });
                thead.append(headerRow);
                table.append(thead);

                // 创建表格主体
                var tbody = $('<tbody></tbody>');
                $.each(data, function(index, item) {
                    var row = $('<tr></tr>');
                    $.each(item, function(key, value) {
                        var inputValue;
                        if (typeof value === 'object' && value !== null) {
                            // 处理对象值，将对象转换为字符串
                            inputValue = JSON.stringify(value);
                        } else {
                            inputValue = value;
                        }
                        // 创建可编辑的输入框
                        var input = $('<input type="text" value="' + inputValue + '">');
                        row.append($('<td></td>').append(input));
                    });
                    tbody.append(row);
                });
                table.append(tbody);

                // 将表格添加到页面容器中
                $('#jsonTableContainer').append(table);
            }).fail(function() {
                console.log('无法加载 JSON 文件');
            });
        });
    </script>
</body>
</html>
